import React from 'react';
import { Card, Typography, Space, Divider, Row, Col } from 'antd';
import {
    FunctionOutlined,
    AimOutlined,
    ExperimentOutlined,
    CheckCircleOutlined,
    DatabaseOutlined
} from '@ant-design/icons';
import ReactECharts from 'echarts-for-react';
import styles from './index.module.css';

const { Title, Paragraph, Text } = Typography;

const BertIntroduction: React.FC = () => {
    // BERT架构图表配置
    const getBertArchitectureChart = () => ({
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['Self-Attention', 'Feed Forward']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['Layer 1', 'Layer 2', 'Layer 3', 'Layer 4', 'Layer 5', 'Layer 6'],
            axisLabel: {
                interval: 0
            }
        },
        yAxis: {
            type: 'value',
            name: '计算复杂度'
        },
        series: [
            {
                name: 'Self-Attention',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [768, 768, 768, 768, 768, 768]
            },
            {
                name: 'Feed Forward',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [3072, 3072, 3072, 3072, 3072, 3072]
            }
        ]
    });

    // 预训练任务性能图表配置
    const getPretrainingTasksChart = () => ({
        title: {
            text: '预训练任务性能对比'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        radar: {
            indicator: [
                { name: 'MLM准确率', max: 100 },
                { name: 'NSP准确率', max: 100 },
                { name: '下游任务迁移', max: 100 },
                { name: '训练效率', max: 100 },
                { name: '模型稳定性', max: 100 }
            ]
        },
        series: [{
            type: 'radar',
            data: [
                {
                    value: [85, 98, 90, 82, 88],
                    name: 'BERT性能指标'
                }
            ]
        }]
    });

    return (
        <div className={styles.container}>
            <Card className={styles.mainCard}>
                <Typography>
                    <Title level={2}>
                        <FunctionOutlined /> BERT (Bidirectional Encoder Representations from Transformers) 算法说明
                    </Title>

                    <Divider />

                    <section className={styles.section}>
                        <Title level={3}>
                            <AimOutlined /> 算法原理
                        </Title>
                        <Paragraph>
                            BERT是一种基于Transformer的深度学习模型，通过双向上下文学习来理解文本的语义信息。
                            它采用预训练和微调的两阶段方法，能够处理各种自然语言处理任务。
                        </Paragraph>

                        <Row gutter={24} className={styles.formulaSection}>
                            <Col span={12}>
                                <Card className={styles.formulaCard}>
                                    <Title level={4}>核心特点</Title>
                                    <div className={styles.formula}>
                                        <ul>
                                            <li>双向上下文编码</li>
                                            <li>预训练-微调范式</li>
                                            <li>多层Transformer结构</li>
                                            <li>掩码语言模型（MLM）</li>
                                            <li>下一句预测（NSP）</li>
                                        </ul>
                                    </div>
                                </Card>
                            </Col>
                            <Col span={12}>
                                <Card className={styles.visualizationCard}>
                                    <ReactECharts option={getBertArchitectureChart()} style={{ height: '300px' }} />
                                </Card>
                            </Col>
                        </Row>

                        <Row gutter={24} style={{ marginTop: '24px' }}>
                            <Col span={24}>
                                <Card className={styles.visualizationCard}>
                                    <ReactECharts option={getPretrainingTasksChart()} style={{ height: '400px' }} />
                                </Card>
                            </Col>
                        </Row>
                    </section>

                    <section className={styles.section}>
                        <Title level={3}>
                            <ExperimentOutlined /> 应用场景
                        </Title>
                        <Row gutter={[24, 24]}>
                            <Col span={8}>
                                <Card className={styles.scenarioCard}>
                                    <Title level={4}>文本分类</Title>
                                    <Paragraph>
                                        情感分析、主题分类、新闻分类等文本分类任务。
                                    </Paragraph>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className={styles.scenarioCard}>
                                    <Title level={4}>问答系统</Title>
                                    <Paragraph>
                                        阅读理解、问题回答、知识问答等交互式任务。
                                    </Paragraph>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className={styles.scenarioCard}>
                                    <Title level={4}>命名实体识别</Title>
                                    <Paragraph>
                                        识别文本中的人名、地名、组织机构等实体。
                                    </Paragraph>
                                </Card>
                            </Col>
                        </Row>
                    </section>

                    <section className={styles.section}>
                        <Title level={3}>
                            <CheckCircleOutlined /> 算法优势
                        </Title>
                        <Row gutter={[24, 24]}>
                            <Col span={12}>
                                <Card className={styles.advantageCard}>
                                    <ul className={styles.advantageList}>
                                        <li>双向上下文理解</li>
                                        <li>预训练模型可迁移</li>
                                        <li>处理长序列能力强</li>
                                        <li>通用语言表示</li>
                                    </ul>
                                </Card>
                            </Col>
                            <Col span={12}>
                                <Card className={styles.advantageCard}>
                                    <ul className={styles.advantageList}>
                                        <li>多任务学习能力</li>
                                        <li>语义理解深入</li>
                                        <li>可扩展性好</li>
                                        <li>性能优越</li>
                                    </ul>
                                </Card>
                            </Col>
                        </Row>
                    </section>

                    <section className={styles.section}>
                        <Title level={3}>
                            <DatabaseOutlined /> 模型架构
                        </Title>
                        <Card className={styles.implementationCard}>
                            <Title level={4}>基本组成</Title>
                            <ol className={styles.stepsList}>
                                <li>
                                    <Text strong>输入嵌入层：</Text>
                                    <Paragraph>
                                        包含词嵌入、位置嵌入和分段嵌入的叠加。
                                    </Paragraph>
                                </li>
                                <li>
                                    <Text strong>Transformer编码器：</Text>
                                    <Paragraph>
                                        多层双向Transformer块的堆叠结构。
                                    </Paragraph>
                                </li>
                                <li>
                                    <Text strong>自注意力机制：</Text>
                                    <Paragraph>
                                        计算序列中每个位置与所有位置的注意力权重。
                                    </Paragraph>
                                </li>
                                <li>
                                    <Text strong>前馈神经网络：</Text>
                                    <Paragraph>
                                        对每个位置独立进行非线性变换。
                                    </Paragraph>
                                </li>
                                <li>
                                    <Text strong>输出层：</Text>
                                    <Paragraph>
                                        根据具体任务设计的输出结构。
                                    </Paragraph>
                                </li>
                            </ol>
                        </Card>
                    </section>

                    <section className={styles.section}>
                        <Title level={3}>使用注意事项</Title>
                        <Card className={styles.noticeCard}>
                            <ul className={styles.noticeList}>
                                <li>计算资源要求高</li>
                                <li>训练数据量要求大</li>
                                <li>序列长度有限制</li>
                                <li>预训练耗时较长</li>
                                <li>需要合理设置超参数</li>
                            </ul>
                        </Card>
                    </section>

                    <section className={styles.section}>
                        <Title level={3}>更新信息</Title>
                        <Card className={styles.updateCard}>
                            <Paragraph>
                                <Text strong>最后更新时间：</Text> 2025-04-25 06:20:58 UTC
                            </Paragraph>
                            <Paragraph>
                                <Text strong>文档维护者：</Text> lijiajunjxstnu
                            </Paragraph>
                        </Card>
                    </section>
                </Typography>
            </Card>
        </div>
    );
};

export default BertIntroduction;
